<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import useService from './service'
  import { ref } from 'vue'
  import Pagination from '@/components/Pagination/index.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HLink from '@/components/common/link/HLink.vue'

  const props = defineProps({
    factoryId: {
      type: String,
      required: true,
    },
  })

  // 使用服务
  const { total, list, loading, getList } = useService

  // 路由
  const router = useRouter()

  /**
   * 查看工单
   * @param {string} id 工单id
   */
  const goWork = (id: string) => {
    router.push('/order/odetail/' + id)
  }

  // 分页组件实例
  const paginationRef = ref<InstanceType<typeof Pagination> | null>(null)

  // 获取请求参数
  const getRequestParam = () => {
    const result = {
      id: props.factoryId,
      pagination: {
        limit: 50,
        page: 1,
      },
    }

    if (paginationRef.value) {
      result.pagination.limit = paginationRef.value.size
      result.pagination.page = paginationRef.value.current
    }

    return result
  }

  /**
   * 获取数据方法
   */
  const getData = () => {
    getList(getRequestParam().id, getRequestParam().pagination)
  }

  defineExpose({
    getData,
    total,
  })
</script>

<template>
  <div class="factory_order_list">
    <div class="table">
      <el-table
        :border="true"
        stripe
        resizable
        :data="list"
        style="width: 100%; position: absolute"
        height="100%"
        v-loading="loading"
      >
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
        <el-table-column show-overflow-tooltip prop="workNo" label="工单编号" width="160" />
        <el-table-column prop="status" label="工单状态" width="90">
          <template #default="scope">
            <HStatus type="warning" v-if="scope.row.status === 1">待派单</HStatus>
            <HStatus type="warning" v-if="scope.row.status === 2">待服务商确认</HStatus>
            <HStatus type="warning" v-if="scope.row.status === 3">处理中</HStatus>
            <HStatus type="success" v-if="scope.row.status === 4">已完成</HStatus>
            <HStatus type="info" v-if="scope.row.status === 5">已取消</HStatus>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="settlement" label="结算状态" width="80">
          <template #default="scope">
            {{ scope.row.settlement ? '已结算' : '待结算' }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="userName" label="客户" width="100" />
        <el-table-column show-overflow-tooltip prop="userPhone" label="客户电话" width="108" />
        <el-table-column show-overflow-tooltip prop="network" label="服务商名称" width="120" />
        <el-table-column show-overflow-tooltip label="工程师信息" width="160">
          <template #default="scope">
            <div style="display: flex; align-items: center; gap: 5px">
              <span>{{ scope.row.engineer }}</span>
              <span>{{ scope.row.engineerPhone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="150" />
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="150" />

        <el-table-column fixed="right" label="操作" width="60">
          <template #default="scope">
            <HLink @click="goWork(scope.row.id)"> 详细 </HLink>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <Pagination
        ref="paginationRef"
        :list_total="total"
        @size-change="getData"
        @current-change="getData"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .factory_order_list {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;

    .table {
      margin: 0;

      .btn_group {
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        color: $secondColor3;

        &:hover {
          color: rgba($secondColor3, 0.4);
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
